<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta th:replace="frontend/fragment/style"/>
    <title th:text="${article.title}"></title>
    <link href="/static/plugins/editormd/css/editormd.preview.min.css" rel="stylesheet" type="text/css">
    <style>
        img:hover{
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, .8);
        }
    </style>
</head>
<body class="simple">
<div id="article-app">
    <bmy-header-mini :params="params" :st="st" :title="title" :bodyid="bodyId" :show-small="false"
                     :home="current"></bmy-header-mini>
    <hr class="header-hr">
    <bmy-block :quote="quote"></bmy-block>
    <bmy-article-page :article="article" :author="author" :comments="comments.totalElements"
                      :name="params.website_title" :tags="tags" :similars="similars"
                      :alipay="params.alipay" :wechat="params.wechat_pay" :su="su">
        <bmy-info slot="info" :info="showInfoLabel" :qq="params.qq_login" :su="su"></bmy-info>
        <bmy-comment v-show="params.all_comment_open == 1 && article.commented" slot="post" :id="article.id"
                     :su="su"></bmy-comment>
        <bmy-search slot="search"></bmy-search>
        <bmy-cate :cates="cates" slot="cate"></bmy-cate>
        <bmy-similar :articles="similars" slot="similar"></bmy-similar>
        <bmy-comment-list slot="comment" :comments="comments" :tips="params.comment_notice"
                          :re="params.all_comment_open == 1 && article.commented"></bmy-comment-list>
    </bmy-article-page>
    <bmy-footer :words="params.footer_words"></bmy-footer>
    <bottom-nav :params="params" :layui-element="elem"></bottom-nav>
</div>
<div th:replace="frontend/fragment/script"></div>
<script src="/static/assets/js/frontend/svg.js"></script>
<script src="/static/plugins/editormd/lib/marked.min.js"></script>
<script src="/static/plugins/editormd/lib/prettify.min.js"></script>
<script src="/static/plugins/editormd/lib/raphael.min.js"></script>
<script src="/static/plugins/editormd/lib/underscore.min.js"></script>
<script src="/static/plugins/editormd/lib/flowchart.min.js"></script>
<script src="/static/plugins/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/static/plugins/editormd/lib/sequence-diagram.min.js"></script>
<script src="/static/plugins/editormd/editormd.min.js"></script>
<script th:inline="javascript">
    layui.use(['layedit', 'laypage', 'code', 'element'], function () {
        var element = layui.element;
        BMY.layedit = layui.layedit;
        var laypage = layui.laypage;
        layui.code({about: false});


        BMY.articleVM = new Vue({
            el: "#article-app",
            data: {
                params: [[${settings}]]
                , article: [[${article}]]
                , st: true
                , current: true
                , title: [[${article.title}]]
                , tags: [[${tags}]]
                , author: [[${author}]]
                , cates: [[${cateList}]]
                , similars: [[${similarArticles}]]
                , su: [[${su}]]
                , showInfoLabel: false
                , comments: [[${comments}]]
                , bodyId: "blog-body"
                , quote: {
                    showText: true
                    , text:
                        '<span class="layui-breadcrumb">' +
                        '   <a href="/">网站首页</a>' +
                        '   <a href="/index">博客文章</a>' +
                        '   <a href="">' + [[${article.title}]] + '</a>' +
                        '   <a><cite>正文</cite></a>' +
                        '</span>'
                }
                , elem: element
            },
            mounted: function () {
                var that = this;
                BMY.stickyIt();
                BMY.affix = new hcSticky("#affix-side", {
                    stickTo: '#blog-body'
                    , queries: {980: {disable: true}}
                    , top: 75
                    , onStart: function () {
                        if (!BMY.sticky()) {
                            BMY.affix.destroy();
                        }
                    }
                });
                if (!BMY.detectmob()) {
                    var mdContent = that.article.mdContent;
                    if (mdContent.indexOf('[TOC]') > -1 || mdContent.indexOf('[TOCM]') > -1) {
                        layer.open({
                            type: 1
                            , title: '文章目录'
                            , area: ['200px', '400px']
                            , maxmin: true
                            , shade: 0
                            , offset: 'r'
                            , content: $("#custom-toc-container")
                            , zIndex: (19930916 + 1)
                        });
                    }
                }
                BMY.editor = BMY.layedit.build('comment-input', {
                    tool: ['face', '|', 'left', 'center', 'right', 'link', 'unlink']
                    , height: 150
                });

                laypage.render({
                    elem: "comment-page"
                    , count: [[${comments.totalElements}]]
                    , layout: ['prev', 'next']
                    , jump: function (obj, first) {
                        if (!first) {
                            layer.msg('第 ' + obj.curr + ' 页');
                            $.post("/article/comments", {
                                id: BMY.articleVM.article.id
                                , page: obj.curr
                                , limit: 10
                            }, function (cs) {
                                BMY.articleVM.comments = cs;
                            })
                        }
                    }
                });

                $("body").on("click", "img", function () {
                    var $thisImg = $(this);
                    window.open($thisImg.attr("src"))
                })

            }
        });
    });
</script>
</body>
</html>